<template>
  <view class="footer-list">
    <view
      class="footer-list-item"
      v-for="item in list"
      :key="item"
      @click="goDetail(item.id)"
    >
      <image :src="imageUrl + item.image" mode="widthFix" />
      <view class="footer-list-item-info" :style="{ background: background }">
        <view class="title" :style="{ fontSize: fontSize }">
          {{ item.name }}
        </view>
        <view class="price_box">
          <view class="price_box-left">
            <text class="price pIcon">{{ item.price }}</text>
            <text class="vip_price pIcon">{{ item.vipPrice }}</text>
          </view>
          <view class="price_box-right">
            <image
              :src="imageUrl + '/static/home/cartIcon.png'"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    fontSize: {
      type: String,
      default: "26rpx",
    },
    background: {
      type: String,
      default: "white",
    },
  },
  data() {
    return {
      imageUrl: "",
    };
  },

  mounted() {},

  methods: {
    goDetail(id) {
      this.$emit("goDetail", id);
    },
  },
};
</script>
<style lang="scss" scoped>
.footer-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  .footer-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(50% - 8rpx);
    margin: 14rpx 0;
    border-radius: 20rpx;
    image {
      width: 100%;
    }
    &:nth-child(2n + 1) {
      margin-right: 8rpx;
    }
    &:nth-child(2n) {
      margin-left: 8rpx;
    }
    &-info {
      background: white;
      padding: 20rpx 14rpx;
      border-bottom-left-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      .title {
        font-size: 27rpx;
        line-height: 1.4em;
        height: 100rpx;
      }
      .price_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left {
          display: flex;
          flex-direction: column;
          .price {
            font-size: 25rpx;
            color: #e05c5f;
          }
          .price::before {
            content: "¥";
            color: #e05c5f;
            margin-right: 3rpx;
          }
          .vip_price {
            font-size: 28rpx;
            color: #e05c5f;
          }
          .vip_price::before {
            content: "会员价¥";
            margin-right: 3rpx;
            font-size: 24rpx;
            font-weight: bold;
            color: #e05c5f;
          }
        }
        &-right {
          width: 46rpx;
          height: 46rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>